<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
// 小白注释：这里改用“默认导入”，更稳妥地兼容编辑器类型服务
// 说明：services/api.ts 现已同时提供具名与默认导出，任选其一都可以。
import subjectAPI from '../services/api'

// 小白注释：统一风格——显式设置组件的“多词”名字，消除 ESLint 对单词组件名的提示
// 你可以理解为“给这个页面正式起个名字”，这里叫 HomeView
defineOptions({ name: 'HomeView' })

/**
 * 小白注释：路由实例
 * 用来实现“点按钮就跳到另一个页面”的功能。
 * 你可以理解为浏览器地址的“导航器”。
 */
const router = useRouter()

/**
 * 小白注释：跳转到学科列表页面
 * 原理：调用 router.push('/subjects')，就像打开一个新网址。
 * 什么时候触发：点击“开始学习”按钮时触发。
 */
const goToSubjects = () => {
  console.log('跳转到学科列表页面')
  router.push('/subjects')
}

/**
 * 小白注释：显示欢迎信息
 * 作用：弹出一个绿色的提示，告诉用户“欢迎来到智学Web应用”。
 * 什么时候触发：点击“了解更多”按钮时触发。
 */
const showWelcome = () => {
  ElMessage.success('欢迎来到智学Web应用！')
}

/**
 * 小白注释：测试 API 连接
 * 做了什么：
 * 1. 先弹提示“正在测试API连接...”；
 * 2. 调用 subjectAPI.getSubjects() 访问后端接口；
 * 3. 如果成功，显示返回的学科数量；
 * 4. 如果失败，友好地提示失败原因（比如服务器没开）。
 * 什么时候触发：点击“测试API”按钮时触发。
 */
const testAPI = async () => {
  try {
    ElMessage.info('正在测试API连接...')
    const subjects = await subjectAPI.getSubjects()
    ElMessage.success(`API连接成功！获取到 ${subjects.length} 个学科数据`)
    console.log('API测试成功:', subjects)
  } catch (error: unknown) {
    // 小白注释：unknown 是“我不确定类型”，这里安全地取 message
    const msg = error instanceof Error ? error.message : String(error)
    ElMessage.error(`API连接失败: ${msg}`)
    console.error('API测试失败:', error)
  }
}
</script>

<template>
  <div class="home-container">
    <!-- 页面头部 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">🎓 智学Web应用</h1>
        <p class="hero-subtitle">智能化学习平台，让学习更高效、更有趣</p>
        <div class="hero-actions">
          <el-button 
            type="primary" 
            size="large" 
            @click="goToSubjects"
            :icon="ArrowRight"
          >
            开始学习
          </el-button>
          <el-button 
            size="large" 
            @click="showWelcome"
          >
            了解更多
          </el-button>
          <el-button 
            type="success"
            size="large" 
            @click="testAPI"
          >
            🧪 测试API
          </el-button>
        </div>
      </div>
    </div>

    <!-- 功能特色 -->
    <div class="features-section">
      <h2 class="section-title">🌟 核心功能</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">📚</div>
          <h3>学科管理</h3>
          <p>支持多学科的创建、编辑和管理</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3>学习进度</h3>
          <p>实时跟踪学习进度和成绩统计</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎯</div>
          <h3>智能推荐</h3>
          <p>基于学习数据的个性化内容推荐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  color: white;
  padding: 40px 20px;
}

.hero-content {
  max-width: 600px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.features-section {
  background: white;
  padding: 60px 20px;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #333;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  padding: 30px;
  border-radius: 12px;
  background: #f8f9fa;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style>
